<template>
	<view class="bg main">
		<Header></Header>
		<view class="container padd-24">
			<view class="">
				<view class="card-power">
					<view class="card-header dis-ai bg-bor-h">
						<view class="status-indicator"></view>
						<text class="title">Power</text>
					</view>

					<view class="divider"></view>

					<view class="card-body bg-bor">
						<view class="metric-item dis-fc">
							<view class="metric-label">
								<uni-icons type="tachometer" size="18" color="#DD2476"></uni-icons>
								<text>功率</text>
							</view>
							<view class="metric-value dis-jc-b">
								<text class="value">9</text>
								<text class="unit">KW</text>
							</view>
						</view>
					</view>
				</view>
				<TPowerCard v-for="(item, index) in TPowerList" :key="index" :data="item" :index="index" />
				<PowerCard v-for="(item, index) in PowerList" :key="index" :data="item" :index="index" />
			</view>
		</view>
		<view class="">

		</view>
		<view class="">

		</view>
	</view>
</template>
<script setup lang="ts">
	import { computed, ref } from 'vue';
	import Header from '@/components/header.vue';
	import TPowerCard from '@/components/TPowerCard.vue';
	import PowerCard from '@/components/PowerCard.vue';
	const PowerList = ref([
		{
			title: 'Voltage and Current',
			power: 45.6,
			powerFactor: 0.92,
			voltage: 380,
			maxPower: 60,
			status: 'on'
		}])
	const TPowerList = ref([
		{
			title: 'Voltage and Current',
			power: 49.6,
			power1: 45.6,
			powerFactor: 0.92,
			powerFactor1: 0.92,
			voltage: 63,
			voltage1: 60,
		}])
</script>
<style scoped lang="scss">
	.main {
		height: 100vh;

		.container {
			padding: 48rpx 160rpx;
			.card-power{
				
				.card-header {
					padding: 24rpx 32rpx;
					// background: linear-gradient(135deg, #3a7bd5, #00d2ff);
					color: white;
					position: relative;
				
					.status-indicator {
						width: 30rpx;
						height: 30rpx;
						border-radius: 50%;
						margin-right: 16rpx;
						transition: background-color 0.3s;
						background-color: $uni-color-paragraph;
					}
				
					.title {
						font-size: 32rpx;
						font-weight: 600;
						flex: 1;
					}
				
					.max-power-badge {
						background: rgba(255, 255, 255, 0.2);
						padding: 6rpx 12rpx;
						border-radius: 100rpx;
						font-size: 24rpx;
					}
				}
				.card-body {
					margin-bottom: 24rpx;
					padding: 24rpx;
					color: #fff;
				}
				
			}
		}
	}
</style>